<template>
  <div class="cs-page-container">
    <div class="cs-filter-container">
      <el-date-picker
        v-model="daterangeValue"
        :picker-options="daterangePickerOptions"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="起始时间"
        end-placeholder="结束时间"
        value-format="yyyy-MM-dd"
        clearable
        @change="daterangeChangedTimestamp"
      />
      <el-select v-model="listQuery.channel" filterable clearable placeholder="渠道">
        <el-option
          v-for="(channel, i) in channels"
          :key="i"
          :label="channel"
          :value="channel"
        />
      </el-select>
      <el-button
        type="primary"
        icon="el-icon-search"
        :loading="listLoading"
        @click="handleFilter"
      >查询</el-button>
      <el-button
        type="info"
        size="small"
        icon="el-icon-refresh-right"
        @click="resetFilter"
      >重置</el-button>
    </div>
    <div class="cs-filter-result">
      <el-table
        v-loading="listLoading"
        :data="list"
        :height="'calc(100vh - 300px)'"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column align="center" label="日期" prop="targetDate">
          <template slot-scope="{ row }">
            <span>{{
              (row.targetDate) | parseTime('{y}-{m}-{d}')
            }}</span>
          </template>
        </el-table-column>

        <!--        <el-table-column align="center" label="渠道" prop="channel">-->
        <!--        </el-table-column>-->

        <el-table-column align="center" label="花费(元)" prop="expenditure">
          <template slot-scope="{ row }">
            <span>{{ (row.expenditure / 100) }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="下载" prop="download">
        </el-table-column>

        <el-table-column align="center" label="激活" prop="activate">
        </el-table-column>

        <el-table-column align="center" label="激活成本">
          <template slot-scope="{ row }">
            <span>{{ (row.expenditure / row.activate / 100).toFixed(2) }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="激活率">
          <template slot-scope="{ row }">
            <span>{{ (row.activate / row.download * 100).toFixed(2) }}%</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="次留率(次留人数)" prop="remain1Day">
          <template slot-scope="{ row }">
            <span>{{ (row.remain1Day/ row.activate * 100).toFixed(2) }}% ({{ row.remain1Day }})</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="3日留存率(留存人数)" prop="remain3Day">
          <template slot-scope="{ row }">
            <span>{{ (row.remain3Day/ row.activate * 100).toFixed(2) }}% ({{ row.remain3Day }})</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="新增充值人数" prop="rechargeNumber">
        </el-table-column>

        <el-table-column align="center" label="新增付费率">
          <template slot-scope="{ row }">
            <span>{{ (row.rechargeNumber / row.activate * 100).toFixed(2) }}%</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="新增付费成本">
          <template slot-scope="{ row }">
            <span>{{ (row.expenditure / row.rechargeNumber / 100).toFixed(2) }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="新增首日充值金额(元)" prop="day1Recharge">
          <template slot-scope="{ row }">
            <span>{{ (row.day1Recharge / 100) }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="新增7日充值金额(元)" prop="targetDate">
          <template slot-scope="{ row }">
            <span>{{ (row.day7Recharge / 100) }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="新增15日充值金额(元)" prop="targetDate">
          <template slot-scope="{ row }">
            <span>{{ (row.day15Recharge / 100) }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="新增30日充值金额(元)" prop="targetDate">
          <template slot-scope="{ row }">
            <span>{{ (row.day30Recharge / 100) }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="新用户首日roi" prop="day1Recharge">
          <template slot-scope="{ row }">
            <span>{{
              (row.day1Recharge / row.expenditure * 100).toFixed(2)
            }}%</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="新用户7日roi" prop="day7Recharge">
          <template slot-scope="{ row }">
            <span>{{
              (row.day7Recharge / row.expenditure * 100).toFixed(2)
            }}%</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="新用户15日roi" prop="day15Recharge">
          <template slot-scope="{ row }">
            <span>{{
              (row.day15Recharge / row.expenditure * 100).toFixed(2)
            }}%</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="新用户30日roi" prop="day30Recharge">
          <template slot-scope="{ row }">
            <span>{{
              (row.day30Recharge / row.expenditure * 100).toFixed(2)
            }}%</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="arpu" prop="arpu">
          <template slot-scope="{ row }">
            <span>{{
              (row.arpu / row.activate / 100).toFixed(2)
            }}</span>
          </template>
        </el-table-column>

      </el-table>
      <TablePagination
        :current-page="listQuery.page"
        :limit="listQuery.limit"
        :total="total"
        :loading="listLoading"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChangeOffset"
      />
    </div>
  </div>
</template>

<script>
  import TablePagination from '@/components/TablePagination'
  import DATEPICKER_OPTIONS from '@/config/datepickerOptions'
  import { xhrPromotionCosts } from '@/api/analysis'

  export default {
    name: 'PromotionCosts',
    components: { TablePagination },
    data() {
      return {
        list: [],
        channels: [],
        total: 0,
        listQuery: {
          offset: 0,
          limit: 100,
          startTime: null,
          endTime: null,
          channel: null
        },
        daterangeValue: '',
        daterangePickerOptions: DATEPICKER_OPTIONS.daterangePickerOptions
      }
    },
    created() {
      this.getChannels()
      this.doSearch()
    },
    methods: {
      getChannels() {
        this.xhrGetChannels().then(resp => {
          this.channels = resp.data
        })
      },
      doSearch() {
        xhrPromotionCosts(this.listQuery).then(resp => {
          this.listLoading = false
          this.total = resp.data.count
          this.list = resp.data.list
        })
      }
    }
  }
</script>
